<template>
  <div class="detail_content">
    <p class="title">| 基本信息</p>
    <el-row class="base_info">
      <el-col :span="3">
        <span>会员ID:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.special_id">{{detail.special_id}}</p>
        <p v-else>---</p>
      </el-col>
      <el-col :span="3">
        <span>创建时间</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.create_time">{{detail.create_time}}</p>
        <p v-else>---</p>
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span="3">
        <span>淘宝渠道ID:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.relation_id">{{detail.relation_id}}</p>
        <p v-else>---</p>
      </el-col>
      <el-col :span="3">
        <span>创建时间:</span>
      </el-col>
      <el-col :span="9">
        <p>{{detail.create_time}}</p>
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span="3">
        <span>上级京东PID:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.relation_id">{{detail.relation_id}}</p>
        <p v-else>---</p>
      </el-col>
      <el-col :span="3">
        <span>创建时间:</span>
      </el-col>
      <el-col :span="9">
        <p>{{detail.create_time}}</p>
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span="3">
        <span>生日:</span>
      </el-col>
      <el-col :span="9">
        <p>{{detail.byear}}-{{detail.bmonth}}-{{detail.bday}}</p>
      </el-col>
      <el-col :span="3">
        <span>性别:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.gender == 0">男</p>
        <p v-else>女</p>
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span="3">
        <span>手机号:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.mobile">{{detail.mobile}}</p>
        <p v-else>---</p>
      </el-col>
      <el-col :span="3">
        <span>用户名/账号:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.username">{{detail.username}}</p>
        <p v-else>---</p>
      </el-col>
    </el-row>
     <el-row class="base_info">
      <el-col :span="3">
        <span>会员昵称:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.mobile">{{detail.mobile}}</p>
        <p v-else>---</p>
      </el-col>
      <el-col :span="3">
        <span>会员姓名:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.username">{{detail.username}}</p>
        <p v-else>---</p>
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span="3">
        <span>支付宝绑定:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.alipay_account">已绑定</p>
        <p v-else>未绑定</p>
      </el-col>
      <el-col :span='3'><span>Openid:</span></el-col>
      <el-col :span='9'><p>1866wdfae6+fg6</p></el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span="3">
        <span>微信绑定:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.wechat_unionid">已绑定</p>
        <p v-else>未绑定</p>
      </el-col>
      <el-col :span="3">
        <span>Openid:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.wechat_unionid">{{detail.wechat_unionid}}</p>
        <p v-else>---</p>
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span="3">
        <span>支付宝姓名:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.alipay_nick_name">{{detail.alipay_nick_name}}</p>
        <p v-else>---</p>
      </el-col>
      <el-col :span="3">
        <span>支付宝账号</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.alipay_user_id">{{detail.alipay_user_id}}</p>
        <p v-else>---</p>
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span="3">
        <span>上级ID:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.parentid">{{detail.parentid}}</p>
        <p v-else>---</p>
      </el-col>
      <el-col :span="3">
        <span>上级手机号:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.parent_mobile">{{detail.parent_mobile}}</p>
        <p v-else>---</p>
      </el-col>
    </el-row>
    <el-row class="base_info">
      <el-col :span="3">
        <span>会员身份:</span>
      </el-col>
      <el-col :span="9">
        <p v-if="detail.level == 0">乐粉</p>
        <p v-if="detail.level == 1">小店会员</p>
        <p v-if="detail.level == 2">合伙人</p>
      </el-col>
    </el-row>

    <p class="title">| 已加入会员小店信息（{{total}}）</p>
    <div class="order_info">
      <el-table
        :data="tableData"
        style="width:100%"
        max-height="680"
        class="table_member_order"
        :cell-style="tc"
        :header-cell-style="tccolor"
      >
        <el-table-column label="UID" prop="id"></el-table-column>
        <el-table-column label="会员店名称" prop="shop_name"></el-table-column>
        <el-table-column label="会员店区域" prop="address"></el-table-column>
        <el-table-column label="加入时间" prop="create_time"></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="disableShopVip(scope.row.id)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-col :span="24">
        <div class="pagination">
          <el-pagination
            background
            @current-change="pageChange"
            :current-page="page"
            :page-size="size"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </div>

    <div class="class_btn">
      <el-button size="mini" type="primary" @click="handleCancel">确定</el-button>
      <el-button size="mini" type="danager" @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
// import { userProfileData, userShopVipList,shopVipDisable } from "@/api/member";

export default {
  name: "member_detail",
  props: ["visible", "currentId"],
  data() {
    return {
      tableData: [],
      page: 1,
      size: 20,
      total: 0,
      detail: {}
    };
  },
  watch: {
    visible(newValue) {
      if (newValue) {

        this.getuserProfileData();
        this.getuserShopVipListData();
      }
    }
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    handleCancel() {
      this.$emit("showMemberdetail");
    },
    //获取用户信息数据
    async getuserProfileData() {
      var url = "uid=" + this.currentId;
      let res = await userProfileData(url);
      if (res.code === 10000) {
        this.detail = res.data;
      } else {
        this.$message.error(res.message);
      }
    },

    pageChange(page) {
      this.page = page;
      this.getuserShopVipListData();
    },
    //获取已经加入小店会员
    async getuserShopVipListData() {
      var url =
        "uid=" + this.currentId + "&page=" + this.page + "&size=" + this.size;

      let res = await userShopVipList(url);
       console.log(res)
      if (res.code === 10000) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    disableShopVip(id){
        this.getshopVipDisableData(id)
    },
    //移除某条会员
    async getshopVipDisableData(id){
      var url = 'id='+id

      let res  = await  shopVipDisable(url)
      if(res.code === 10000){
        this.$message.success('移除成功')
           this.getuserShopVipListData()
      }else{
        this.$message.error(res.message)
      }
    }
  }
};
</script>


<style scoped lang="scss">
.detail_content {
  padding: 20px;
  .title {
    font-size: 16px;
  }

  .base_info {
    margin: 15px 20px 20px;
    span {
      font-size: 12px;
      color: #999999;
    }

    p {
      font-size: 13px;
      color: #333333;
    }
  }
  .order_info {
    margin-top: 16px;
  }

  .class_btn {
    margin-top: 30px;
    text-align: center;
  }
  .pagination {
    float: right;
    margin:10px 0px;
  }
  .table_member_order{
    margin: 20px 0px 10px;

  }
}
</style>

